<template>
	<view class="shop_detail">
		<view class="back">
			<image @click="back" src="../../static/img/back.png" mode=""></image>
		</view>
		<view class="shop_main">
			<image :src="detObj.item_img" mode=""></image>
			<view class="tab_desc">
				<view class="tab_title">

					<view class="price">¥{{detObj.item_price}}</view>
					<view class="title">{{detObj.item_title}}</view>
					<view class="content">{{detObj.item_content}}</view>
				</view>

			</view>
			<view class="tran">
				<div class="txt">
					<text>运费</text>
					<text>待下单时确认</text>
				</div>

				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="tran" @click="show=!show">
				<div class="txt">
					<text>服务</text>
					<text>线下门店 · 快递发货 · 收货后结算
					</text>
				</div>

				<u-icon name="arrow-right"></u-icon>
			</view>

			<view class="tran2" @click="show2=!show2">
				<div class="txt">
					<text>选择</text>
					<text>现货</text>
				</div>

				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="tran3">
				<view class="tran3_title">
					为你推荐
				</view>
				<view class="other_list">
					<view class="other_tab" @click="jumpDetail(item.item_id)" v-for="item in otherShopList">
						<image :src="item.item_img" mode=""></image>
						<view class="other_tab_desc">
							{{item.item_title}}
						</view>
						<text class="other_price">
							{{item.item_price}}
						</text>
					</view>

				</view>
			</view>
		</view>
		<!-- <image
			src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/4b8dc19f-4e16-4d47-a8a7-50b753df99dd.jpg"
			mode=""></image> -->
		<view class="detail_img">
			<image class="img_1"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/4b8dc19f-4e16-4d47-a8a7-50b753df99dd.jpg"
				mode=""></image>
			<image class="img_2"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/39a26575-3d98-472f-8a70-409ffb243d9d.png"
				mode=""></image>
			<image class="img_3"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/f0846643-5f7c-4da2-9eb6-a195683aa3c6.jpg"
				mode=""></image>
			<image class="img_4"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/1971853b-fd8d-4956-9e26-e862ebf1be53.jpg"
				mode=""></image>
			<image class="img_5"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/c8b75703-0625-401f-8dca-3a4d14b66eda.jpg"
				mode=""></image>
			<image class="img_6"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/4ee856c6-3720-44e3-aedb-b6c1a4de4bec.jpg"
				mode=""></image>
			<image class="img_7"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/bb2415dc-4fd3-4290-859e-40ca3ac6749a.jpeg"
				mode=""></image>
			<image class="img_8"
				src="https://mp-4a309ad7-91e7-4d22-97ea-e9113ee79467.cdn.bspapp.com/cloudstorage/f7cb34d4-bbf4-48bd-9a60-0e277040ff83.png"
				mode=""></image>
		</view>
		<view class="fixed_box">
			<view class="shop_icon">
				<u-icon name="shopping-cart" @click="jumpShop" color="#ff78a2" size="26px"></u-icon>
				<text>购物车</text>
			</view>
			<view class="shop_icon licon" @click="toggleCol">
				<u-icon :name="flat? 'heart-fill':'heart'" color="#ff78a2" size="26px"></u-icon>
				<text>收藏</text>
			</view>
			<view class="shop_btn">
				<view class="btn_left" @click="show2=!show2">
					加入购物车
				</view>
				<view class="btn_right" @click="show3=!show3">
					立即购买
				</view>
			</view>
		</view>
		<u-popup :round="10" :show="show" mode="bottom" @close="close">
			<view>
				<view class="pop_1">
					<view class="pop_1_title">
						线下门店
					</view>
					<view class="pop_1_main">
						天青色等烟雨,而我在等你
					</view>
					<view class="pop_2_title">
						快递发货
					</view>
					<view class="pop_2_main">
						落叶的位置,谱出一首诗
					</view>
					<view class="pop_2_title">
						收货后结算
					</view>
					<view class="pop_2_main">
						该店铺交易由有赞提供资金存管服务，当符合以下条件时，资金自动结算给商家：买家确认收货或到达约定的自动确认收货日期。交易资金未经有赞存管的情形（储值型、电子卡券等）不在本服务范围内。
					</view>
					<view class="button" @click="show=false">我知道了</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :closeable="true" :show="show2" mode="bottom" @close="close2">
			<view>
				<view class="pop_2">
					<view class="pop_2_title">
						<view class="pop_2_title_img">
							<image :src="detObj.item_img" mode=""></image>
							<view class="pop_2_title_txt">
								<view class="price-title">
									50
								</view>
								<view class="price-bottom">
									我可以陪你去流浪
								</view>
							</view>
						</view>
					</view>
					<view class="pop_2_shop">
						<view class="shop_title">
							预售定金
						</view>
						<text class="shop_button">
							[尾款284元]预计23年8月出荷
						</text>
					</view>
					<view class="pop_2_control">
						<view class="pop_num">
							<text>数量</text>
							<view class="num_btn">
								<view class="num_btn_del" @click="del">
									-
								</view>
								<input v-model="num" type="number" disabled="true">
								<view class="num_btn_add" @click="add">
									+
								</view>
							</view>
						</view>
						<view class="add_shop" @click="addShopBagList">加入购物车</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :closeable="true" :show="show3" mode="bottom" @close="close3">
			<view>
				<view class="pop_2">
					<view class="pop_2_title">
						<view class="pop_2_title_img">
							<image :src="detObj.item_img" mode=""></image>
							<view class="pop_2_title_txt">
								<view class="price-title">
									50
								</view>
								<view class="price-bottom">
									我可以陪你去流浪
								</view>
							</view>
						</view>
					</view>
					<view class="pop_2_shop">
						<view class="shop_title">
							预售定金
						</view>
						<text class="shop_button">
							[尾款284元]预计23年8月出荷
						</text>
					</view>
					<view class="pop_2_control">
						<view class="pop_num">
							<text>数量</text>
							<view class="num_btn">
								<view class="num_btn_del" @click="del">
									-
								</view>
								<input v-model="num" type="number" disabled="true">
								<view class="num_btn_add" @click="add">
									+
								</view>
							</view>
						</view>
						<view class="add_shop" @click="jumpOrder">提交订单</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import test from '../../uni_modules/uview-ui/libs/function/test';
	export default {
		data() {
			return {
				detObj: {},
				show: false,
				show2: false,
				num: 1,
				otherShopList: [],
				flat: false,
				show3: false
			};
		},
		onLoad(option) {
			// uni.setStorageSync("sid", option.sid)
			uni.setStorageSync("sid", Number(option.sid))

		},
		async onShow() {
			uni.showLoading({
				title: "加载中..."
			})
			if (uni.getStorageSync("flat")) {} else {
				let sid = uni.getStorageSync("sid")
				await this.getDetail(sid)
				await this.otherList()
			}
			await this.test1()
			if (uni.getStorageSync("_id")) {
				uniCloud.callFunction({
					name: 'user_add_web',
					data: {
						uid: uni.getStorageSync("_id"),
						item_id: uni.getStorageSync("sid")
					}
				}).then((res) => {})
				await this.selCol()
			} else {
				uni.hideLoading()
			}
			// console.log(uni.getStorageSync("sid"), uni.getStorageSync("_id"))

		},
		methods: {
			async selCol() {
				uniCloud.callFunction({
					name: "user_select_collect",

					data: {
						uid: uni.getStorageSync("_id"),
						item_id: this.detObj.item_id
					}
				}).then(res => {
					this.flat = res.result.flat
					console.log(res.result.flat)
					uni.hideLoading()
				})
			},
			async test1() {
				uniCloud.callFunction({
					name: "test_shop",
					data: {
						item_id: this.detObj.item_id
					}
				}).then((res) => {})
			},
			addShopBagList() {
				if (uni.getStorageSync("_id")) {
					let con = this.detObj.item_id
					let count = this.num
					let uid = uni.getStorageSync("_id")
					uni.showLoading({
						title: "加载中..."
					})
					uniCloud.callFunction({
						name: "add_shop_bag",
						data: {
							con,
							count,
							uid
						}
					}).then((res) => {
						uni.showToast({
							title: "加入购物车成功"
						})
						this.show2 = false
					})
				} else {
					this.show2 = false
					uni.showModal({
						title: '请先登录',
						content: '确定前登录页？',
						cancelText: "取消", // 取消按钮的文字
						confirmText: "确认", // 确认按钮的文字
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#333',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								}) //点击确定之后执行的代码
							} else {
								//点击取消之后执行的代码
							}
						},

					})
				}

			},
			toggleCol() {

				if (uni.getStorageSync("_id")) {
					uni.showLoading({
						title: "加载中..."
					})
					uniCloud.callFunction({
						name: "user_add_collect",

						data: {
							uid: uni.getStorageSync("_id"),
							item_id: this.detObj.item_id
						}
					}).then(res => {
						this.flat = !this.flat
						console.log(res)
						if (res.result.length == 0) {
							uni.showToast({
								title: "添加收藏成功",
								icon: "none"
							})
						} else {
							uni.showToast({
								title: "取消收藏成功",
								icon: "none"
							})
						}
					})
				} else {
					uni.showModal({
						title: '请先登录',
						content: '确定前登录页？',
						cancelText: "取消", // 取消按钮的文字
						confirmText: "确认", // 确认按钮的文字
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#333',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								}) //点击确定之后执行的代码
							} else {
								//点击取消之后执行的代码
							}
						},

					})
				}

			},
			jumpShop() {
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			},
			jumpOrder() {
				if (uni.getStorageSync("_id")) {
					let con = this.detObj.item_id
					let count = this.num
					let uid = uni.getStorageSync("_id")
					uniCloud.callFunction({
						name: "add_detail_pay",
						data: {
							con,
							count,
							uid,
							type: 0
						}
					}).then((res) => {
						console.log(res.result.id)
						let dd = []
						dd.push(res.result.id)
						uni.setStorageSync("shop_id", dd)
						uni.navigateTo({
							url: "/pages/order/order"
						})
					})
				} else {
					this.show3 = false
					uni.showModal({
						title: '请先登录',
						content: '确定前登录页？',
						cancelText: "取消", // 取消按钮的文字
						confirmText: "确认", // 确认按钮的文字
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#333',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								}) //点击确定之后执行的代码
							} else {
								//点击取消之后执行的代码
							}
						},

					})

				}

			},
			otherList() {
				uniCloud.callFunction({
					name: "orther_shop",

				}).then((res) => {
					this.otherShopList = res.result.data
				})
			},
			del() {
				if (this.num > 1) {
					this.num--
				}
			},
			add() {
				this.num++
			},
			close() {
				this.show = false

				// console.log('close');
			},
			close2() {
				this.show2 = false

				// console.log('close');
			},
			close3() {
				this.show3 = false

				// console.log('close');
			},
			back() {
				uni.setStorageSync("flat", 1)
				uni.navigateBack({
					delta: 1,
				})
			},
			async getDetail(sid) {
				await uniCloud.callFunction({
					name: "detail_shop",
					data: {
						item_id: sid
					}

				}).then((res) => {
					let {
						result: {
							data
						}
					} = res
					this.detObj = data[0]
				})
			},
			jumpDetail(sid) {

				uni.removeStorageSync("flat")
				uni.navigateTo({
					url: `/pages/detail/detail?sid=${sid}&flat=1`
				})
			},
		}
	}
</script>

<style lang="scss">
	.pop_2_control {
		margin: 14px 10px 10px;

		.pop_num {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.add_shop {
			width: 100%;
			background-color: #ff78a2;
			color: white;
			border-radius: 24px;
			height: 45px;
			text-align: center;
			line-height: 44px;
			font-weight: 700;
			margin-top: 24px;
		}
	}

	.num_btn {
		display: flex;
		align-items: center;

		text {
			margin-right: 4px;
			font-size: 14px;
			color: #333;
		}

		input {
			background-color: whitesmoke;
			width: 20px;
			outline: none;
			border: none;
			font-size: 14px;
			text-align: center;
			width: 22px;
			height: 22px;
			color: #333;
		}

		.num_btn_del {
			width: 22px;
			line-height: 20px;
			height: 22px;
			background-color: whitesmoke;
			margin-right: 2px;
			text-align: center;
			color: #333;


		}

		.num_btn_add {
			width: 22px;
			margin-left: 2px;
			line-height: 20px;
			height: 22px;
			background-color: whitesmoke;
			text-align: center;
			color: #333;

		}
	}

	.pop_2_shop {
		margin: 10px;
		border-bottom: 1px solid whitesmoke;
		padding-bottom: 20px;

		.shop_title {
			margin-bottom: 14px;
			font-size: 15px;
		}

		.shop_button {
			font-size: 13px;
			color: #ff78a2;
			background-color: #ffefef;
			border-radius: 6px;
			padding: 4px 10px;
		}
	}

	.pop_2_title_txt {
		margin-top: 10px;
		margin-left: 10px;

		.price-title {
			font-size: 18px;
			color: #ff78a2;
			font-weight: 700;

			&::before {
				content: "￥";
				color: #ff78a2;
				font-size: 12px;
			}
		}

		.price-bottom {
			margin-top: 6px;
			font-size: 12px;
			color: #999;
		}

	}

	.pop_2 {
		height: 320px;

		.pop_2_title {
			height: 120px;
			width: 100%;
			box-sizing: border-box;

			.pop_2_title_img {
				height: 100%;
				display: flex;
				align-items: center;

			}

			image {
				margin-left: 12px;
				width: 90px;
				height: 90px;
				border-radius: 10px;
			}
		}
	}

	.pop_1 {
		height: 300px;
		border-radius: 20px 20px 0 0;
		margin: 20px 20px 0;

		.button {

			border-radius: 22px;
			width: 100%;
			background-color: #999;
			height: 45px;
			text-align: center;
			line-height: 44px;
			color: white;
			background-color: #ff78a2;


		}

		.pop_1_title {
			margin-bottom: 6px;
			font-size: 15px;
		}

		.pop_1_main {
			font-size: 13px;
			color: #999;
			margin-bottom: 20px;
		}

		.pop_2_title {
			margin: 10px 0;
			margin-bottom: 6px;
			font-size: 15px;
		}

		.pop_2_main {
			font-size: 13px;
			color: #999;
			margin-bottom: 20px;
		}
	}

	.tran3 {
		margin: 20rpx 0;
		padding: 20rpx 20rpx 0;
		background-color: white;

		.other_list {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;

			.other_tab {
				width: 32%;
				height: 190px;

				.other_tab_desc {
					margin-top: 4px;
					font-size: 12px;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 32px;
				}

				.other_price {
					display: block;
					color: #ff78a2;
					margin-top: 4px;

					&::before {
						content: "￥";
						font-size: 12px;
						margin-right: -2px;
					}
				}

				image {
					height: 110px;
				}
			}
		}

	}

	.shop_btn {
		width: 230px;
		height: 50px;
		display: flex;
		margin-right: 20px;
		font-size: 15px;
		align-items: center;
		color: white;

		.btn_left {
			width: 50%;
			height: 45px;
			// background: line(#ff78a2, #ffd7e9);
			background: linear-gradient(to left, #ff78a2, #ffbbbb);
			border-radius: 25px 0 0 25px;
			text-align: center;
			line-height: 45px;
		}

		.btn_right {
			text-align: center;
			line-height: 45px;
			width: 50%;
			height: 45px;
			background: linear-gradient(to right, #ff4f52, #ff794c);
			;
			border-radius: 0 25px 25px 0;
		}
	}

	.detail_img {

		image {
			width: 100%;
			display: block;
		}

		.img_1 {
			height: 175px;
		}

		.img_2 {
			background-color: white;
			height: 375px;
		}

		.img_3,
		.img_4,
		.img_5,
		.img_6,
		.img_7 {
			height: 200px;
		}

		.img_8 {
			height: 600px;
			background-color: white;
		}
	}

	.fixed_box {
		height: 50px;
		width: 100%;
		padding: 6px 0;
		background-color: white;
		box-shadow: 0 2px 4px #c3c3c3;
		position: fixed;
		bottom: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.shop_icon {
			margin-left: 20rpx;
			width: 45px;
			height: 45px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #ff78a2;

			text {
				font-size: 12px;
			}


		}

		.licon {
			margin-left: 0rpx;
		}


	}

	.tran2 {
		background-color: white;
		padding: 20rpx 20px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			margin-left: 20rpx;

			&:first-child {
				color: #999;
				margin-left: 0px;
			}
		}
	}

	.tran {
		background-color: white;
		padding: 20rpx 20px;
		margin-top: 20rpx;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			margin-left: 20rpx;

			&:first-child {
				color: #999;
				margin-left: 0px;
			}
		}

	}

	.shop_detail {
		width: 100%;
		position: relative;
		background-color: whitesmoke;

		.shop_main {

			image {
				height: 375px;
				width: 100%;
				display: block;
			}

			.tab_desc {
				padding: 20rpx 20px;
				background-color: white;

				.price {
					font-size: 22px;
					margin-bottom: 20rpx;
					color: #ff78a2;

				}

				.title {
					font-size: 14px;
					margin-bottom: 4px;
				}

				.content {
					font-size: 12px;
					color: darkgray;
				}
			}
		}
	}

	.back {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		z-index: 1;

		image {
			width: 20px;
			height: 20px;
			background-color: rgba(255, 255, 255, .8);
			padding: 20rpx;
			border-radius: 50%;

		}
	}
</style>